<template>
  <div>
    <q-stepper
      v-model="step"
      ref="stepper"
      color="primary"
      animated
    >
      <q-step v-for="item in stepsData" :key="item.name" :name="item.name" :title="item.title" :icon="item.icon">
      </q-step>
      <template v-slot:navigation>
            <q-stepper-navigation align="right">
<!--              <div>-->
<!--                <q-btn v-if="step > 1" color="warning" @click="returnStep" label="返回" class="q-mr-sm" size="15px" />-->
<!--                <q-btn  @click="next" label="下一步" color="accent" size="15px"/>-->
<!--                <q-btn v-if="step === stepsData.length" color="primary" label="提交" size="15px" ></q-btn>-->
<!--              </div>-->
            </q-stepper-navigation>
      </template>
<!--      <template v-slot:message>-->
<!--        <q-banner v-if="step === 1" class="bg-purple-8 text-white q-px-lg">-->
<!--          step1-->
<!--        </q-banner>-->
<!--        <q-banner v-else-if="step === 2" class="bg-orange-8 text-white q-px-lg">-->
<!--          step2-->
<!--        </q-banner>-->
<!--        <q-banner v-else-if="step === 3" class="bg-green-8 text-white q-px-lg">-->
<!--          step3-->
<!--        </q-banner>-->
<!--        <q-banner v-else class="bg-blue-8 text-white q-px-lg">-->
<!--          step4-->
<!--        </q-banner>-->
<!--      </template>-->
    </q-stepper>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'Stepper',
  // props: {
  //   stepData: {
  //     type: Array,
  //     required: true,
  //     default: function () {
  //       return []
  //     }
  //   }
  // },
  setup () {
    const stepsData = ref([
      { name: 1, title: '版本', icon: 'create_new_folder' },
      { name: 2, title: '主要产品及产能', icon: 'create_new_folder' },
      { name: 3, title: '主要生产工艺和设施', icon: 'create_new_folder' }
    ])
    const step = ref(1)
    const next = () => {
      step.value = step.value + 1
      console.log(step.value)
    }
    return {
      stepsData,
      step,
      next
    }
  }
})
</script>

<style scoped>

</style>
